<template>
	<view class="hbh_head">
		<!-- <view class="hbh_container2" :style="{background:selectBackground}">
		</view> -->
		<view class="hbh_top">
		</view>
		<view class="hbh_title">
			<view class="hbh_toText">
				<view class="hbh_leftImage" v-if="isBack" @click="handelBack">
					<image src="/static/image/left.png" mode=""></image>
				</view>
				<view class="hbh_novelStore" v-if="novelStore">
					<image src="/static/image/novelStore.png" mode="" @click="toNovelStore"></image>
					<text>(书城)</text>
				</view>
				<view class="hbh_notice" v-if="talkBack" @click="handleResive">
					<text>(消息)</text>
					<image src="/static/image/msgBox.png" mode=""></image>
				</view>
				<view class="hbh_notice" v-if="notice" @click="toDownPage">
					<text>(下载进度)</text>
					<image src="/static/image/notice.png" mode=""></image>
				</view>
				<text :style="{color:fontColor}">{{navTitle}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "headComponent",
		props: {
			navTitle: {
				type: String,
				default: ""
			},
			isBack: {
				type: Boolean,
				default: true
			},
			selectBackground: {
				type: String,
				default: "#fff"
			},
			fontColor: {
				type: String,
				default: '#00aaff'
			},
			notice: {
				type: Boolean,
				default: false
			},
			talkBack: {
				type: Boolean,
				default: false
			},
			novelStore: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			};
		},
		methods: {
			handelBack() {
				uni.navigateBack()
			},
			//去下载txt小说队列
			toDownPage() {
				uni.navigateTo({
					url: "/pages/downTxtPage/downTxtPage"
				})
			},
			handleResive() {
				uni.showToast({
					icon: "none",
					title: "开发中！"
				})
			},
			toNovelStore() {
				uni.navigateTo({
					url: "/pages/searchBook/searchBook"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hbh_head {
		background-color:$global-background;

		// .hbh_container2 {
		// 	position: fixed;
		// 	z-index: -1;
		// 	top: 0rpx;
		// 	left: 0rpx;
		// 	width: 100%;
		// 	height: 460rpx;
		// 	border-radius: 0px 0px 0px 0px;
		// 	opacity: 1;

		// }

		.hbh_top {
			height: var(--status-bar-height);
		}

		.hbh_title {
			width: 100%;
			height: 89rpx;
			display: flex;
			align-items: center;

			.hbh_toText {
				width: 100%;
				height: 89rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;

				text {
					font-size: 36rpx;
					font-weight: 500;
				}

				.hbh_novelStore {
					position: absolute;
					top: calc(50% - 22.5rpx);
					height: 45rpx;
					left: 30rpx;
					display: flex;
					align-items: center;
					color: #00aaff;

					text {

						font-size: 24rpx;
					}

					image {
						width: 45rpx;
						height: 45rpx;
					}
				}

				.hbh_notice {
					position: absolute;
					top: calc(50% - 22.5rpx);
					height: 45rpx;
					right: 30rpx;
					display: flex;
					align-items: center;
					color: #00aaff;

					text {

						font-size: 24rpx;
					}

					image {
						width: 45rpx;
						height: 45rpx;
					}
				}

				.hbh_leftImage {
					position: absolute;
					left: 0rpx;
					top: calc(50% - 17.5rpx);
					width: 35rpx;
					height: 35rpx;
					margin-left: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

			}


		}
	}
</style>